﻿@{
    Layout = null;
}

<div id="PiezaDental" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <h4 class="modal-title">Pieza Dental</h4>
    </div>

    <div class="modal-body no-padding">
        <div class="space10"></div>
        <div class="col-xs-12">
            <div class="col-xs-6 no-padding">
                <div class="col-xs-12">
                    Número
                </div>
                <div class="col-xs-12">
                    <input type="text" id="txtNumero" class="form-control">
                </div>
            </div>
            <div class="col-xs-6 no-padding">
                <div class="col-xs-12">
                    Descripción
                </div>
                <div class="col-xs-12">
                    <input type="text" id="txtDescripcion" class="form-control">
                </div>
            </div>
            <div class="space10"></div>
            <div class="col-xs-12 no-padding">
                <div id="PiezaDentalListResult" class="col-xs-12 no-padding">
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer" style="margin-top: 15px;">
        <button id="CancelarBuscarPiezaDental" type="button" data-dismiss="modal" class="btn btn-xs btn-default">
            Cancelar
        </button>
        <button id="AceptarBuscarPiezaDental" type="button" data-dismiss="modal" class="btn btn-xs btn-primary">
            Aceptar
        </button>
    </div>
</div>

<script src="~/assets/plugins/jquery/jquery.js"></script>

<script>        
    function GetPiezaDental(nro) {
        $.get('@Url.Action("GetPiezaDental", "PiezaDental")?nro=' + nro, function (data) {
            $('#txtNumero').val(data[0].nroPiezaDental);
            $('#txtDescripcion').val(data[0].tipoPiezaDental);
            CreatePiezaDentalGrid(data);
        });
    }

    /* Crea la tabla de PiezaDentals al dar click en Buscar PiezaDental*/
    function CreatePiezaDentalGrid(data) {
        var $PiezaDentalsList = $('#PiezaDentalListResult'),
            listHTML = '';

        $PiezaDentalsList.empty();

        if (data.length > 0) {
            listHTML += '<table class=\"table table-striped table-bordered table-hover table-full-width\">' +
                            '<thead><tr>' +
                                '<th>Zona</th><th>Estado</th><th>Observación</th>' +
                            '</tr></thead>';

            listHTML += '<tbody>';

            $.each(data, function (i, n) {
                var estado = (n.estado == "C") ? "Curada" : "No tratada";

                listHTML += '<tr>' +
                                '<td>' + n.nombreZonaDental + '</td><td>' + estado + '</td><td></td>' +
                            '</tr>';
            });

            listHTML += '</tbody></table>';

            $PiezaDentalsList.append(listHTML);
        } else {
            $PiezaDentalsList.empty();
            alert('No se encontraron resultados');
        }
    }
</script>
